<template>
  <div class="albumlist">
    <div style="display: flex;flex-flow: row wrap">
      <div v-for="album in albums" :key="album.id" class="record">
        <Record :album="album" :size="130"/>
      </div>
    </div>

    <div style="text-align: center;">
      <el-pagination :total="total" :current-page="currentPage" :page-size="12" background layout="prev, pager, next"
                      @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Record from '@/components/Record/Record.vue';

export default {
  name: "ArtistAllAlbums",
  data() {
    return {
      albums: {},
      total: 0,
      currentPage: 1,
    };
  },
  mounted() {
    this.getAlbums();
  },
  components: {Record},
  methods: {
    async getAlbums() {
      const offset = (this.currentPage - 1) * 12;
      let result = await this.$API.artistAlbums(this.$route.query.id, 12, offset);
      if (result.data.code == 200) {
        this.albums = result.data.hotAlbums;
        this.total = result.data.artist.albumSize;
      }
    },
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getAlbums();
    },
  }
}
</script>

<style lang="less" scoped>
.albumlist {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;

  .record {
    flex: 25%;
    margin-bottom: 20px;
  }
}
</style>